<template>
  <div class="time-line-box">
    <div class="project-selector">
      <van-dropdown-menu active-color="#1ab57f">
        <van-dropdown-item v-model="keyProject" :options="proList" />
      </van-dropdown-menu>
      <van-dropdown-menu active-color="#1ab57f">
        <van-dropdown-item v-model="keyUploader" :options="authorList" />
      </van-dropdown-menu>
    </div>
    <div class="line-items" v-for="(item,index) in logRes" :key="index">
      <div class="second">
        <div class="item-info">
          <div class="item-time">
            {{item.time}}
          </div>
          <div class="item-author">
            上传人员：{{item.author}}
          </div>
        </div>
        <div class="first">
          <div class="item-content">
            <div class="third">
              日志描述：
            </div>
            <div class="item-describe">
              &emsp;{{item.describe}}
            </div>
            <div class="item-img">
              <div v-for="(img,i) in item.imgs" :key="i">
                <img :src="i === 3 ? defaultImg : img" alt="qw">
              </div>
            </div>
          </div>
          <div class="view-details" @click="toDetails">
            查看详情&nbsp; >>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="issue" @click="uploadLog">
    <van-icon
      name="plus"
      color="#fff"
      size="40"
    />
    <!--<van-icon name="upgrade" />-->
  </div>
</template>

<script setup>
import {ref} from "vue"
import {useRouter} from "vue-router"
const defaultImg = require("@/assets/images/Log/more.jpg")

// 路由
const router = useRouter()

// 项目选择
const proList = ref([
  { text: '2022年新宾高标准农田', value: 0 },
  { text: '项目2', value: 1 },
  { text: '项目3', value: 2 },
])
// 作者选择
const authorList = ref([
  { text: '仅自己上传', value: 0 },
  { text: '全部上传', value: 1 },
])
// value绑定
const keyProject = 0
const keyUploader = 0

// 展示时间轴的详情列表
let logRes = [
  {
    time: '2023-12-31 13:20',
    author:'张三',
    describe: '机耕路换填',
    imgs:[require("@/assets/images/ProjectImages/p1.jpg"),],
  },
  {
    time: '2023-12-28 17:38',
    author:'张三',
    describe: '石笼网',
    imgs:[require("@/assets/images/ProjectImages/p4.jpg"),require("@/assets/images/ProjectImages/p6.jpg")],
  },
  {
    time: '2023-12-27 10:40',
    author:'张三',
    describe: '机耕路平整',
    imgs:[require("@/assets/images/ProjectImages/p5.jpg"),require("@/assets/images/ProjectImages/p6.jpg"),require("@/assets/images/ProjectImages/p5.jpg"),require("@/assets/images/ProjectImages/p6.jpg")],
  },
  {
    time: '2023-12-23 12:01',
    author:'张三',
    describe: '石笼网',
    imgs:[require("@/assets/images/ProjectImages/p3.jpg")],
  },
  {
    time: '2023-12-20 18:52',
    author:'张三',
    describe: '机耕路平整',
    imgs:[require("@/assets/images/ProjectImages/p2.jpg"),require("@/assets/images/ProjectImages/p2.jpg"),require("@/assets/images/ProjectImages/p2.jpg"),],
  }
]

// 点击上传
const uploadLog = () => {
  router.push('/upload')
}

// 跳转详情
const toDetails = () => {
  router.push('/details')
}
</script>

<style scoped lang="less">
.time-line-box{
  padding-bottom: 200px;
  font-size: 30px;
  .project-selector{
    width: 100%;
    justify-content: space-between;
    height: 150px;
    display: flex;
    .van-dropdown-menu{
      width: 50%;
    }
  }
  .second{
    padding-top: 20px;
    .item-info{
      display: flex;
      justify-content: left;
      padding-left: 40px;
      box-sizing: border-box;
      align-items: baseline;
      margin-bottom: 20px;
      .item-time{}
      .item-author{
        margin-left: 120px;
      }
    }
    .first{
      border: 1px solid darkgray;
      width: 570px;
      margin-left: 30px;
      height: auto;
      padding: 20px;
      border-radius: 20px;
      background-color: white;
      //margin-top: 100px;
      .item-content{
        .third{
          text-align: left;
        }
        .item-describe{
          margin-top: 20px;
          margin-bottom: 30px;
          text-align: left;
        }
        .item-img{
          display: flex;
          flex-wrap: wrap;
          justify-content: space-around;
          padding-left: 20px;
          img{
            height: 250px;
            width: 250px;
            margin-right: 10px;
            margin-top: 10px;
          }
          &::after{
            flex: auto;
            content: '';
          }
        }
      }
      .view-details{
        font-size: 28px;
        text-align: left;
        margin-top:40px;
        margin-bottom:20px;
        padding-left: 25px;
        color: #1dcf91;
      }
    }
  }

}
.line-items {
  color: #262626;
  position: relative;
  padding-left: 30px;
  list-style: none;
  margin-bottom: 40px;
  &:before {
    position: absolute;
    left: 20px;
    content: " ";
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background-color: #1dcf91;
    //z-index: 900;
  }
  &:after {
    position: absolute;
    top: 28px;
    left: 26px;
    bottom: -100px;
    content: " ";
    width: 1px;
    border-right: 1px solid gray;
  }
  &:not(:first-child) {
    padding-top: 8px;
  }
  &:last-child {
    &:after {
      bottom: -50px;
    }
  }
  &.is-done {
    &:after {
      border-color: #0091fa;
    }
    &:before {
      background-color: #1874ff;
      box-shadow: #1874ff 0 0 10px;
    }
  }
}
.issue{
  box-sizing: border-box;
  position: fixed;
  height: 100px;
  width: 100px;
  border-radius: 50%;
  bottom: 150px;
  right: 30px;
  background-color: cadetblue;
  z-index: 999;
  line-height: 100px;
  padding-top: 12px;
  padding-left: 2px;
}
</style>